<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>京东的工具栏</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		li{
			list-style: none;
		}
		.box{
			width: 460px;
			height: 350px;
			background: red url(./tool.png) 0 0 no-repeat;
		}
		.list{
			height: 220px;
			/*background: red url() 0 0 no-repeat;*/
			position: fixed;
			bottom:160px;
			right: 0px;
			border-right: 5px solid #7A6E6E;
		}
		.list li{
			width: 35px;
			height: 35px;
			background: #7A6E6E url(./tool.png) -50px 0 no-repeat;
			margin-bottom: 2px;
			border-radius: 2px;

		}
		.list li.box2{
			background-position:-50px -50px;
		}

		.list li.box3{
			background-position:-50px -100px;
		}

		.list li.box4{
			background-position:-50px -150px;
		}

		.list li.box5{
			background-position:-190px -100px;
		}


	</style>
</head>
<body>
	<div class="box">
		
	</div>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<ul class="list">
		<li class="box1"></li>
		<li class="box2"></li>
		<li class="box3"></li>
		<li class="box4"></li>
		<li class="box5"></li>
		<li class="box6"></li>
	</ul>
</body>
</html>